import {UserOutlined} from '@ant-design/icons';
import {Avatar, Divider, Row, Col, Popover} from 'antd';
import {ContainerOutlined} from '@ant-design/icons';
import React from 'react';
import './HeadAvatar.css'
import StatisticAvatar from "./StatisticAvatar/StatisticAvater";
import AvatarNavLink from "./AvatarNavLink/AvatarNavLink";
import ExitIcon from "./Icons/ExitIcon/ExitIcon";


const buttonWidth = 10;


const content = (
    <div>

        <div className="box" style={{
            marginLeft: buttonWidth,
            clear: 'both',
            whiteSpace: 'nowrap',
        }}>
            <AvatarNavLink to="/">个人中心</AvatarNavLink>
            <Divider orientation="left" style={{fontSize: 1}}>muen</Divider>
            {/* ContainerOutlined*/}
            <AvatarNavLink to="/article">写博客</AvatarNavLink>
            <Divider orientation="left" style={{fontSize: 1}}>muen2</Divider>

            <AvatarNavLink to="/BasicDemo">BasicDemo</AvatarNavLink>
            <AvatarNavLink to="/TextEdit">TextEdit</AvatarNavLink>
            <AvatarNavLink to="/TextEditPage">TextEditPage</AvatarNavLink>
            {/*分割线*/}
            <Divider orientation="left" style={{fontSize: 1}}></Divider>

            <AvatarNavLink to="/search_result_list">返回首页</AvatarNavLink>
            <AvatarNavLink to="/emp">员工表</AvatarNavLink>
            {/*分割线*/}
            <Divider orientation="left" style={{fontSize: 1}}></Divider>

            <AvatarNavLink to="/login"><Row gutter={[8, 16]}>
                <Col span={4}>
                    <div
                        style={{
                            marginTop: '-3px'
                        }}>
                        <ExitIcon/>
                    </div>
                </Col>

                <Col span={4}>
                    登 录
                </Col>
                <Col span={16}></Col>
            </Row> </AvatarNavLink>
            <AvatarNavLink to="/"><Row gutter={[8, 16]}>
                {/*可以退出到登录页面和主页*/}
                    <Col span={4}>
                        <div
                            style={{
                                marginTop: '-3px'
                            }}>
                            <ExitIcon/>
                        </div>
                    </Col>

                <Col span={4}>
                    <div >
                        退 出
                    </div>

                </Col>
                <Col span={16}></Col>
            </Row> </AvatarNavLink>
        </div>
        <div>


        </div>
    </div>

);


const HeadAvatar = () => {
    return <>

        <div>
            <Popover
                content={content}

                title={<StatisticAvatar/>}

                trigger="hover">


                <Avatar
                    className="avatartobig"
                    size={32}

                    icon={<UserOutlined/>}

                    src="https://ts1.cn.mm.bing.net/th?id=OIP-C.1-wFaNNsH_OCBFvGCfloWgHaJ4&w=216&h=288&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"

                />
            </Popover>


            {
                /*   注释掉不用的antd样式
                         <Avatar size="large" icon={<UserOutlined />} />
            <Avatar icon={<UserOutlined />} />
            <Avatar size="small" icon={<UserOutlined />} />*/}
        </div>
    </>
}

export default HeadAvatar;



